<template>
    <div>
        <div>
            <van-nav-bar title="我要送礼" left-arrow @click-left="onClickLeft"/>
            <div>
                <div class="imga"><img src="" alt=""></div>
                <div class="ya">
                    <img src="//mall01.sogoucdn.com/cdn/h5/static/images/box.90f5a6b1f44e0119b0930cc48e0dc561.png" alt="" class="imgb">

                        <h3>挑选礼物</h3>
                        <span>点击这里挑选喜欢的礼物</span>

                    <i>></i>
                </div>
            </div>
            <div>
                <div>
                    <div>
                        <van-divider>写上你的祝福</van-divider>
                    </div>
                    <div class="inpits">
                    <input type="text" placeholder="大吉大利，今晚吃鸡">
                    </div>
                    <div class="mottey">￥0.00</div>
                    <div class="liji">立即送礼</div>
                    <div>
                    <ul>
                        <li>商品首页</li>
                        <li>使用说明</li>
                        <li>礼物记录</li>
                    </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
import { NavBar, Divider } from 'vant'
import { mapMutations } from 'vuex'
Vue.use(NavBar).use(Divider)
export default {
  created () {
    this.hideAsides()
  },
  methods: {
    ...mapMutations(['showAsides', 'hideAsides']),
    onClickLeft () {
      this.showAsides()
      this.$router.back()
    }

  }
}
</script>
<style lang="scss" scoped>
    html,body{
        height: 100%;
        display: flex;
        position: relative;
    }
    .imga{

        background-image: url('https://mall01.sogoucdn.com/cdn/h5/static/images/topBg.e35b54174c92d54c70d72d7894887776.png') ;
        background-size:contain;
        background-repeat:no-repeat;
        width: 100%;
        height: 210px;
        margin-bottom: 13px;
    }
    .ya{
        position: absolute;
        top: 150px;
        left: 15px;
        margin: 10px;
        width: 90%;
        height: 102px;
        background: rgb(248, 222, 222);

        margin: 0 auto;

        box-sizing: border-box;
    }

    .imgb{
        width: 60px;
        height: 80px;
        margin: 15px 15px 3px 15px;
        float: left;
    }
    .ya>h3{
        font-size: 15px;
        margin-top: 30px;
    }
    .ya>span{
        font-size: 12px;
    }
    .ya>i{
        position: absolute;
        top: 40px;
        right: 10px;
        font-size: 25px;
    }
    .inpits input{
        width: 80%;
        height: 80px;
        margin-left: 30px;
        background: rgb(245, 245, 245);
        border: none;
    }
    .mottey{
        margin: 10px 0 10px 0;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
    }
    .liji{
        text-align: center;
        width: 270px;
        height: 50px;
        line-height: 50px;
        color: white;
        background: red;
        margin-left: 30px;
        font-size: 20px;
    }
    ul{
        text-align: center;
        margin: 10px 0;
    }
    ul>li{
        display:inline-block;
        padding: 0 5px;
        font-size: 10px;
        height: 10px;
        border-right: 2px solid rgb(175, 175, 175);
        line-height: 10px;
    }

</style>
